<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>selection.transition(),该过度是对于选择集自身的元素来说的，子元素是不受影响的</li>
		<li>选择子元素：transition.select()、transition.selectAll()、transition.filter()</li>
	</ul>
	
		<div class="transition">
			
		</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500;
		var dataset = [10,10,10];

		var svg = d3.select(".transition").append('svg').attr({"width":width,"height":height});
		var g = svg.append("g");

		var rect = g.selectAll("rect").data(dataset).enter().append("rect")
								.attr("x",50)
								.attr("y",function(d,i) {
									return 30 + i * 50
								})
								.attr("width",function(d) {
									return d
								})
								.attr("height",40)
								.attr("fill","skyblue")
								.attr("class",function(d,i) {
									return "rect" + i;
								})
		g.select(".rect0").transition().attr("width",500).delay(200).duration(2000);
		g.select(".rect1").transition().attr("width",500).delay(600).duration(2000);
		g.select(".rect2").transition().attr("width",500).delay(1000).duration(2000);

	</script>
</body>
</html>